<template>
  <div class="xmind-command-bar">
    <div class="xmind-canvas-list">
      <el-popover ref="mapListPopoverRef" placement="top-end" :show-after="100" :show-arrow="false" popper-class="xmind-menu-list-popover canvas-list">
        <div class="menu-list">
          <div class="title">
            <p>画布列表</p>
            <i class="ri-add-large-line" @click="handleNewXmindMap" v-show="canvasList.length < 5"></i>
          </div>
          <div class="tip">每个用户至多可以创建 5 个画布</div>
          <div
            class="menu-list-item"
            v-for="(item, index) in canvasList"
            :key="item.id"
            @click="handleUpdateXmindMap(index)">
            <div class="iitem">
              <i class="selected ri-check-line" :class="{ hidden: sheetIdx !== index }"></i>
              <p>{{ item.name }}</p>
              <el-popover placement="right" :show-arrow="false" :offset="8" :teleported="false" popper-class="xmind-menu-list-popover mini-popover">
                <div class="menu-list" @click.stop>
                  <div
                    class="menu-list-item"
                    :class="{
                      'x_border': itemName.border,
                      'x_disabled': itemName.disabled
                    }"
                    v-for="itemName in mindMapMenuList"
                    :key="itemName.operate"
                    @click="handleOperateXmindMap(item, itemName.operate, itemName.disabled)">
                    <div class="iitem">
                      <p>{{ itemName.name }}</p>
                    </div>
                  </div>
                </div>
                <template #reference>
                  <div class="more" @click.stop>
                    <i class="ri-more-line"></i>
                  </div>
                </template>
              </el-popover>
            </div>
          </div>
        </div>
        <template #reference>
          <div class="label-item">
            <p>{{ xmindMapName }}</p>
            <i class="ri-arrow-down-s-fill"></i>
          </div>
        </template>
      </el-popover>
    </div>
    <div class="mindmap-mode-change" @click="handleUpdateMindMode">
      <i class="ri-repeat-line"></i>
      <span>{{ isMindMode ? '导图模式' : '大纲模式' }}</span>
    </div>
    <div class="thumb-switch">
      <el-checkbox
        label="开启缩略图"
        v-model="openThumbValue"
        @change="handleThumbSwitchChange"></el-checkbox>
    </div>
    <div class="scale">
      <i class="icon ri-subtract-line" @click="setMindScale('reduce')"></i>
      <el-popover placement="top" :show-after="100" :offset="22" :show-arrow="false" popper-class="xmind-menu-list-popover small-popover">
        <div class="menu-list">
          <div
            class="menu-list-item"
            v-for="(item, index) in SCALES"
            :key="index">
            <div class="iitem" @click="updateXmindScale(item)">
              <p style="font-family: lato;">{{ item }} %</p>
            </div>
          </div>
        </div>
        <template #reference>
          <span style="font-family: lato;">{{ scaleNumber }} %</span>
        </template>
      </el-popover>
      <i class="icon ri-add-fill" @click="setMindScale('add')"></i>
    </div>
    <NewFolderMind
      v-if="modalVisible"
      operateType="map"
      :mapDetail="mapDetail"
      @close-modal="handleCloseModal" />
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, computed, watch } from 'vue'
import { SCALES } from '../config'
import NewFolderMind from '@/pages/work/components/NewFolderMind.vue'

const emits = defineEmits(['set-scale', 'new-map', 'change-map', 'change-mode', 'rename-success', 'update:modelValue'])
const props = defineProps({
  mindId: String,
  scaleNumber: Number,
  canvasList: {
    type: Array,
    default: () => []
  },
  sheetIdx: Number,
  isMindMode: Boolean,
  modelValue: Boolean
})

const mapListPopoverRef = ref()
const openThumbValue = ref(props.modelValue)
const modalVisible = ref(false)
const mapDetail = ref(null)

const mindMapMenuList = computed(() => {
  return [
    { name: '复制链接', disabled: true, operate: 'copy-link' },
    { name: '复制', border: true, operate: 'copy-map', disabled: props.canvasList.length >= 5 },
    { name: '重命名', border: true, operate: 'rename' },
    { name: '删除', operate: 'delete', disabled: props.canvasList.length === 1 }
  ]
})

function setMindScale (command) {
  if (command === 'reduce') {
    const scale = props.scaleNumber - 10
    emits('set-scale', Math.max(scale, 10) / 100)
  } else if (command === 'add') {
    const scale = props.scaleNumber + 10
    emits('set-scale', Math.min(scale, 500) / 100)
  }
}

function handleOperateXmindMap (mapItem, operate, disabled) {
  if (disabled) return
  switch (operate) {
    case 'delete': {
      const idx = props.canvasList.findIndex(o => o.id === mapItem.id)
      emits('new-map', idx, true)
      break
    }
    case 'rename': {
      modalVisible.value = true
      mapDetail.value = { mindId: props.mindId, mapId: mapItem.id, name: mapItem.name }
      break
    }
    case 'copy-map':
      emits('copy-map', mapItem.id)
      break
    default:
      break
  }
  mapListPopoverRef.value.hide()
}

function handleCloseModal (refresh, detail) {
  modalVisible.value = false
  if (refresh) {
    emits('rename-success', detail)
  }
}

function handleNewXmindMap () {
  emits('new-map')
  mapListPopoverRef.value.hide()
}

function handleUpdateXmindMap (idx) {
  emits('change-map', idx)
}

function updateXmindScale (k) {
  emits('set-scale', k / 100)
}

function handleUpdateMindMode () {
  emits('change-mode')
}

function handleThumbSwitchChange (value) {
  emits('update:modelValue', value)
}

const xmindMapName = computed(() => {
  return props.canvasList[props.sheetIdx]?.name
})

watch(() => props.modelValue, (newVal) => {
  openThumbValue.value = newVal
})

</script>

<style scoped lang="scss">
.xmind-command-bar {
  position: fixed;
  left: 20px;
  bottom: 10px;
  box-shadow: inset 0px 0px 3px 0px rgba(255, 255, 255, 0.1), 0px 0px 3px 0px rgba(0, 0, 0, 0.14), 0px 8px 40px 0px rgba(0, 0, 0, 0.06);
  background: #fff;
  border-radius: 6px;
  padding: 6px 8px;
  z-index: 9;
  display: flex;
  align-items: center;
  user-select: none;
  .mindmap-mode-change {
    display: flex;
    align-items: center;
    border-radius: 4px;
    padding: 0 8px;
    height: 36px;
    margin: 0 2px 0 0;
    i {
      font-size: 16px;
      margin-right: 4px;
    }
    span {
      font-size: 13px;
    }
    &:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }
    &::after {
      right: -8px;
    }
  }
  .scale {
    padding: 0 6px;
    display: flex;
    align-items: center;
    margin-left: 10px;
    .icon {
      font-size: 20px;
      color: #4c4c4c;
    }
    span {
      font-size: 12px;
      font-family: revert;
      width: 40px;
      display: inline-block;
      text-align: center;
    }
  }
  .xmind-canvas-list {
    .label-item {
      display: flex;
      max-width: 150px;
      align-items: center;
      margin-right: 12px;
      border-radius: 4px;
      height: 36px;
      padding: 0 8px;
      p {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 14px;
      }
      .ri-arrow-down-s-fill {
        font-size: 18px;
        flex-shrink: 0;
        position: relative;
        top: 3px;
        margin-left: 5px;
      }
      &:hover {
        background-color: rgba(0, 0, 0, 0.05);
      }
    }
  }
  .thumb-switch {
    display: flex;
    align-items: center;
    margin-left: 12px;
    padding: 0 8px;
    height: 36px;
    border-radius: 4px;
    &:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }
    .el-checkbox {
      position: relative;
      top: 1px;
      .el-checkbox__label {
        color: #000;
      }
      .is-checked + .el-checkbox__label {
        color: var(--el-checkbox-checked-text-color);
      }
    }
    &::after {
      right: -7px;
    }
  }
  & > div {
    position: relative;
    &:after {
      content: "";
      position: absolute;
      width: 1px;
      top: 8px;
      bottom: 6px;
      right: 8px;
      background-color: #f1f1f1;
    }
  }
}
</style>
